<template>
  <div class="container d-flex flex-column flex-grow-1">
    <div class="d-flex justify-content-center">
      <el-input v-model="params.name" prefix-icon="el-icon-search" :clearable=true @change="init"
                placeholder="请输入搜索内容" class="m-3 col-12 col-lg-6 "></el-input>
    </div>
    <el-empty v-if="page?.records.length===0" description="没有数据"></el-empty>
    <div class="my-2 d-flex flex-column">
      <div class="row" style="--bs-gutter-y:1rem">
        <div v-for="o in page?.records" :key="o.id" class="col-6 col-lg-3">
          <div class="bg-white ">
            <div class="overflow-hidden">
              <a :href="Info()+'?id='+o.id " class="ratio ratio-4x3">
                <img :src="o.imgUrl" alt="加载失败" class="img"/>
              </a>
            </div>
            <div class="d-flex justify-content-between align-items-center">
              <span class="px-1 text-truncate"> {{ o.name }} </span>
              <i class="el-icon-star-off me-1">{{ o?.start || 0 }}</i>
            </div>
            <avtar class="px-1 bg-white" :avatarUrl=o.userAvtar :name=o.nickName></avtar>
          </div>
        </div>
      </div>
      <div class="d-flex justify-content-center">
        <el-pagination :total="page.total" layout="prev, pager, next" @current-change="init"
                       :page-size="page.size" :current-page.sync="page.current"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {DesignImageInfo} from "@/index";
import {defineComponent} from "vue";
import {getJson} from "@/api/http";
import {Img_getPage} from "@/api/api";
import avtar from "@/components/avtar.vue";

export default defineComponent({
  components: {
    avtar
  },
  data() {
    return {
      params: {},
      page: {
        size: 12,
        total: 0,
        current: 1,
        records: []
      },
    }
  },
  methods: {
    async init() {
      let data = {
        current: this.page.current,
        size: this.page.size,

        isHomeImg: true,
        styleId: this.params.styleId,
        name: this.params.name,
      }
      let ret = await getJson(Img_getPage, data)
      this.page = ret.data
    },
    Info() {
      return DesignImageInfo
    }
  },
  async created() {
    await this.init()
  }
})
</script>

<style scoped lang="less">
.img:hover {
  transform-origin: 50% 50%;
  animation: myMove 3s forwards;
}

@keyframes myMove {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
</style>